import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import { Space } from "antd";
import { useConfig } from "@/contexts/ConfigContext";
import { useSettings } from "@/store/settingStore";
import { useThemeToken } from "@/theme/hooks";
import { cn } from "@/utils";
import { HEADER_HEIGHT } from "../config";
import { ThemeLayout } from "#/enum";

interface Props {
	onToggle: () => void;
}

export default function NavLogo({ onToggle }: Props) {
	const { themeLayout } = useSettings();
	const { colorPrimary, colorBgContainer, colorBorderSecondary } =
		useThemeToken();
	const { config } = useConfig();

	return (
		<div
			style={{ height: `${HEADER_HEIGHT}px` }}
			className={cn(
				"flex items-center justify-between px-3 ",
				"transition-[padding] duration-300",
			)}
		>
			<Link to="/" className="no-underline">
				<Space size={8} className="py-3">
					{config?.website_logo && (
						<img src={config.website_logo} alt="logo" className="w-8 h-8" />
					)}
					{config?.name && themeLayout !== ThemeLayout.Mini && (
						<span className="text-xl font-bold" style={{ color: colorPrimary }}>
							{config?.name}
						</span>
					)}
				</Space>
			</Link>

			<div
				onClick={onToggle}
				onKeyDown={onToggle}
				role="button"
				tabIndex={0}
				className={cn(
					"flex items-center justify-center w-6 h-6 rounded cursor-pointer",
					"hover:bg-gray-100 transition-colors duration-300",
				)}
				style={{
					backgroundColor: colorBgContainer,
					border: `1px solid ${colorBorderSecondary}`,
				}}
			>
				{themeLayout === ThemeLayout.Vertical ? (
					<LeftOutlined className="text-base" />
				) : (
					<RightOutlined className="text-base" />
				)}
			</div>
		</div>
	);
}
